<template>
	<uni-popup ref="popupRef" type="bottom" :mask-click="false">
		<view class="calender_box">
			<view class="calender_header">
				<view class="calender_header_left" @tap="cancel">取消</view>
				<view class="calender_header_right" @tap="confirm">确定</view>
			</view>
			<uniCalendar ref="calendarRef" class="serviceCalender" :selected="selectedDate" :insert="true" :startDate="date" :clear-date="true" :date="date" @change="selectDate" :showMonth="false" :multiple="true" />
		</view>
	</uni-popup>
</template>

<script setup>
import uniCalendar from '@/pages/payment/uni_components/uni-calendar/components/uni-calendar/uni-calendar.vue'
import { ref } from 'vue';
import dayjs from 'dayjs';

const emit = defineEmits(['confirm'])
const date = ref(dayjs().add(1,'day').format('YYYY-MM-DD'));
const calendarRef = ref();
const popupRef = ref();
const selectedDate = ref([]);

const confirm = () => {
	popupRef.value.close();
	emit('confirm', selectedDate.value)
};

const cancel = () => {
	popupRef.value.close();
	selectedDate.value = []
};

const open = (data = []) => {
	if (data.length > 0) {
		selectedDate.value = data.map(item => ({
			date: item.fulldate,
			info: '已选择'
		}))
	} else {
		selectedDate.value = [
			{
				date: date.value,
				info: '已选择'
			}
		]
	}
	popupRef.value.open();
};
const selectDate = (data) => {
	if (selectedDate.value.length == 15) {
		uni.showToast({
			icon: 'none',
			title: '最多选择15天'
		});
		return
	}
	// data {"year":2024,"month":2,"date":24}
	if(data.fulldate == dayjs().format('YYYY-MM-DD')) return
	const index = selectedDate.value.findIndex(item => item.date === data.fulldate)
	if(index !== -1) {
		selectedDate.value.splice(index,1)
	} else {
		const newDate = {
			date: data.fulldate,
			info: '已选择'
		}
		selectedDate.value.push(newDate)
	}
	selectedDate.value = [...selectedDate.value];
}
defineExpose({ open });
</script>

<style lang="scss" scoped>
	.calender_box {
		
		.calender_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #E5E5E5;
			.calender_header_left {
				font-size: 28rpx;
				color: #1A1A1A;
			}
			.calender_header_right {
				font-size: 28rpx;
				color: #1A1A1A;
			}
		}
	}
</style>
